<template>
  <div class="role__wrapper">
    <!-- 查询 -->
    <div class="role__top">
      <el-form :inline="true" :model="queryForm" ref="queryForm">
        <el-form-item label="审批状态">
          <el-select v-model="queryForm.applyState" placeholder="请选择">
            <el-option :value="0" label="待审批"></el-option>
            <el-option :value="1" label="待审批"></el-option>
            <el-option :value="2" label="审批中"></el-option>
            <el-option :value="3" label="审批拒绝"></el-option>
            <el-option :value="4" label="审批通过"></el-option>
            <el-option :value="5" label="作废"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getleaveList">查询</el-button>
          <el-button @click="resetForm('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- /查询 -->
    <!-- 表格 -->
    <div class="role__bottom">
      <div class="active">
        <el-button type="primary" v-has:add="'leave-add'" @click="handleAdd"
          >休假申请</el-button
        >
      </div>
      <el-table :data="leaveList" style="width: 100%">
        <el-table-column
          v-for="item in tableColum"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :width="item.width"
          :align="item.align"
        >
        </el-table-column>
        <el-table-column label="操作" width="250px">
          <template #default="scope">
            <el-button size="mini" @click="checkTheDetails(scope.row)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="warning"
              @click="handeDelete(scope.row._id)"
              v-if="[1, 2].includes(scope.row.applyState)"
              >作废</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 表格结束 -->
  </div>
  <!-- 申请休假弹窗 -->
  <el-dialog title="休假申请" v-model="showDialog" width="50%">
    <el-form
      ref="leaveForm"
      :rules="rules"
      :model="leaveForm"
      label-width="100px"
    >
      <el-form-item label="休假类型" prop="applyType">
        <el-select v-model="leaveForm.applyType">
          <el-option :value="1" label="事假" />
          <el-option :value="2" label="调休" />
          <el-option :value="3" label="年假" />
        </el-select>
      </el-form-item>
      <el-form-item label="休假时间">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="leaveForm.startTime"
                type="date"
                placeholder="开始时间"
                @change="changTime('startTime', value)"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1"> - </el-col>
          <el-col :span="8">
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="leaveForm.endTime"
                type="date"
                placeholder="结束时间"
                @change="changTime('endTime', value)"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="休假时长"> {{ leaveForm.leaveTime }} </el-form-item>
      <el-form-item label="休假原因" prop="reason">
        <el-input v-model="leaveForm.reason" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handeClos">取 消</el-button>
        <el-button type="primary" @click="handeSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 查看详情弹窗 -->
  <el-dialog title="审批详情" v-model="detaiDialog" width="30%">
    <el-steps
      :active="detail.applyState > 2 ? 3 : detail.applyState"
      align-center="true"
      simple
    >
      <el-step title="待审批"></el-step>
      <el-step title="审批中"></el-step>
      <el-step title="审批通过/拒绝"></el-step>
    </el-steps>
    <el-form label-suffix=":">
      <el-form-item label="休假类型">
        {{ detail.applyTypeName }}
      </el-form-item>
      <el-form-item label="休假时间">
        {{ detail.time }}
      </el-form-item>
      <el-form-item label="休假时长">
        {{ detail.leaveTime }}
      </el-form-item>
      <el-form-item label="休假原因">
        {{ detail.reason }}
      </el-form-item>
      <el-form-item label="审批状态">
        {{ detail.applyStateName }}
      </el-form-item>
      <el-form-item label="审批人">
        {{ detail.curAuditUserName }}
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="detaiDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import util from '@/utils/utils.js'
export default {
  name: 'Leave',
  data () {
    return {
      queryForm: {
        applyState: 1
      },
      showDialog: false,
      detaiDialog: false,
      leaveForm: {
        leaveTime: "0天"
      },
      action: 'create',
      page: {
        pageNum: 1,
        pageSize: 8,
      },
      leaveList: [],
      detail: {},
      tableColum: [
        {
          prop: 'orderNo',
          label: "申请单号"
        }, {
          prop: '',
          label: "休假时间",
          formatter (row) {
            return util.formateDate(new Date(row.startTime), 'yyyy-MM-dd')
              + "到" + util.formateDate(new Date(row.endTime), 'yyyy-MM-dd')
          }
        }, {
          prop: 'leaveTime',
          label: "休假时长",
          align: 'center'
        }, {
          prop: 'applyType',
          label: "休假类型",
          align: 'center',
          formatter (row, cloum, value) {
            return {
              1: '事假',
              2: '调休',
              3: '年假'
            }[value]
          }
        }, {
          prop: 'reason',
          label: "休假原因",
          align: 'center',
        }, {
          prop: 'startTime',
          label: "申请时间",
          align: 'center',
          formatter (row, cloumn, value) {
            return (util.formateDate(new Date(value), "yyyy-MM-dd"))
          }
        }, {
          prop: 'auditUser',
          label: "审批人"
        }, {
          prop: 'curAuditUserName',
          label: "当前审批人",
          align: 'center',
        }, {
          prop: 'applyState',
          label: "审批状态",
          align: 'center',
          formatter (row, cloumn, value) {
            // 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
            return {
              1: '待审批',
              2: '审批中',
              3: '审批拒绝',
              4: '审批通过',
              5: '作废'
            }[value]
          }
        }
      ],
      rules: {
        applyType: {
          required: true, message: "休假类型必选", trigger: "blur"
        },
        startTime: { required: true, message: "开始时间必选", trigger: "blur" },
        endTime: { required: true, message: "结束时间必选", trigger: "blur" },
        reason: { required: true, message: "请填写原因", trigger: "blur" },
      }
    }
  },
  methods: {
    /**
     * @type 表单重置对象
     */
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * @type 分页按钮事件
     */
    handleCurrentChange (curren) {
      this.page.pageNum = curren
    },
    /**
     * @type 请求列表接口事件
     */
    async getleaveList () {
      let params = { ...this.page, ...this.queryForm }
      const { list, page } = await this.$api.getLeaveList(params)
      this.leaveList = list;
      this.page.total = page.total
    },
    /**
     * @type 休假申请
     */
    handleAdd () {
      this.showDialog = true
      this.action = 'create'
    },
    /**
     * @type 取消弹窗
     */
    handeClos () {
      this.resetForm("leaveForm")
      this.showDialog = false
    },
    /**
     * 提交事件
     */
    handeSubmit () {
      this.$refs.leaveForm.validate(async (valid) => {
        if (valid) {
          let params = { action: this.action, ...this.leaveForm }
          try {
            await this.$api.leaveSubmit(params)
            this.$message.success('提交成功')
            this.handeClos()
            this.getleaveList()
          } catch (error) {
            this.$message.success(error)
          }
        }
      })
    },
    /**
     * @type 计算时间
     */
    changTime (key, value) {
      const { startTime, endTime } = this.leaveForm
      if (!startTime || !endTime) return false
      if (startTime > endTime) {
        this.$message.error('开始时间不得大于结束时间')
        setTimeout(() => {
          this.leaveForm[key] = ""
        }, 0)
      } else {
        this.leaveForm.leaveTime = ((endTime - startTime) / (24 * 60 * 60 * 1000)) + 1 + "天"
      }
    },
    /**
     * @type 查看详情
     */
    checkTheDetails (row) {
      const data = { ...row }
      data.applyTypeName = {
        //申请类型  1:事假 2：调休 3:年假
        1: "事假",
        2: "调休",
        3: "年假"
      }[data.applyType]
      data.time = (util.formateDate(new Date(data.startTime), "yyyy-MM-dd") + '到' + util.formateDate(new Date(data.endTime), "yyyy-MM-dd"))
      data.applyStateName = {
        // 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
        1: "待审批",
        2: "审批中",
        3: "审批拒绝",
        4: "审批通过",
        5: "作废"
      }[data.applyState]

      this.detail = data
      this.detaiDialog = true
    },
    /**
     * @type 作废
     */
    async handeDelete (id) {
      this.action = 'delete'
      try {
        await this.$api.leaveSubmit({ action: this.action, _id: id })
        this.$message.success('删除成功')
        this.getleaveList()
      } catch (error) {
        this.$message.error('错误异常')
      }
    }
  },
  mounted () {
    this.getleaveList()
  }
}
</script>

<style lang="scss" scoped>
.role__wrapper {
  background: #fff;
}
.role__top {
  height: 0.8rem;
  padding: 0.24rem;
  border-bottom: 0.01rem solid #ebeef1;
}
.role__bottom {
  background: #ebeef1;
  padding-top: 0.3rem;
  .active {
    background: #fff;
    padding: 0.27rem;
  }
  .pages {
    text-align: right;
    padding: 0.1rem 0.27rem;
    background: #fff;
  }
}
</style>